<template>
	<view class="content">
		<view class="head">
			<view class="title">欢迎登录枫叶生产管理系统</view>
			<view class="head-bottom">
				<view class="date-div">
					<view class="time">12:56:27</view>
					<view class="date">12月29日 星期三</view>
				</view>
				<view class="button-div">
					<button class="button color-orange" type="default">
						<u-icon name="scan" size="40"></u-icon>
						<text class="text">扫码识别</text>
					</button>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="total">
				<view class="left">
					<view class="title">全部订单</view>
					<view class="number">1000</view>
				</view>
				<view class="right">
					<u-row>
						<u-col span="3">
							<view class="title">未完成</view>
							<view class="number">1000</view>
						</u-col>
						<u-col span="3">
							<view class="title">待发货</view>
							<view class="number">1000</view>
						</u-col>
						<u-col span="3">
							<view class="title">已发货</view>
							<view class="number">1000</view>
						</u-col>
						<u-col span="3">
							<view class="title">已完成</view>
							<view class="number">1000</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="chart-name">月订单统计</view>
			<view class="box chart-bar"><echarts :option="optionLine" style="height: 300rpx;"></echarts></view>
			<view class="chart-name">本月订单发货情况统计</view>
			<view class="box chart-pie">
				<view class="chart-left"><echarts :option="optionPie" style="height: 300rpx;"></echarts></view>
				<view class="chart-right">
					<view class="chart-total">
						<view class="chart-total-title">
							<view class="badge-green"> </view>已发货
						</view>
						<u-row class="number">
							<u-col span="6">100</u-col>
							<u-col span="6" class="color-orange">80%</u-col>
						</u-row>
					</view>
					<view class="chart-total">
						<view class="chart-total-title">
							<view class="badge-blue"> </view>未发货
						</view>
						<u-row class="number">
							<u-col span="6">100</u-col>
							<u-col span="6" class="color-orange">20%</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import echarts from '@/components/echarts/echarts.vue';
export default {
	data() {
		return {
			optionLine: {},
			optionPie: {}
		};
	},
	components: {
		echarts
	},
	onLoad() {},
	mounted() {
		this.chartLine();
		this.chartPie();
	},
	methods: {
		chartLine() {
			this.optionLine = {
				backgroundColor: 'rgb(254,254,254)',
				tooltip: {
					trigger: 'axis',
					axisPointer: { type: 'shadow' }
				},
				grid: {
					top: '20',
					right: '5',
					bottom: '20',
					left: '30'
				},
				legend: {
					data: [{ name: '已完成' }, { name: '未完成' }],
					top: '0%',
					right: '0',
					lineStyle: {
						width: 0
					},
					textStyle: {
						fontSize: 12
					}
				},
				xAxis: [
					{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
						axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
						axisLabel: { textStyle: { color: 'rgb(168,168,168)', fontSize: '12' } },
						splitArea: {
							show: true,
							interval: 0,
							areaStyle: {
								color: ['rgb(246,245,250)', 'rgb(254,254,254)']
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '件',
						splitLine: {
							show: true
						},
						axisLabel: {
							show: true,
							fontSize: 12,
							color: 'rgb(168,168,168)'
						},
						axisLine: {
							min: 0,
							max: 10,
							lineStyle: { color: 'rgba(255,255,255,.4)' }
						} //左线色
					}
				],
				series: [
					{
						name: '已完成',
						type: 'line',
						data: [35, 36, 38, 40, 41, 35, 36, 38, 40, 41, 89, 60],
						lineStyle: {
							normal: {
								width: 2
							}
						},
						symbol: 'none',
						itemStyle: {
							normal: {
								color: 'rgb(250,17,61)'
							}
						},
						smooth: true,
						// markPoint: {
						// 	data: [
						//         {type: 'max', name: '最大值'}
						//     ]
						// }
					},
					{
						name: '未完成',
						type: 'line',
						data: [60, 40, 45, 55, 32, 41, 52, 87, 42, 51, 69, 50],
						lineStyle: {
							normal: {
								width: 2
							}
						},
						symbol: 'none',
						itemStyle: {
							normal: {
								color: '#3496f8'
							}
						},
						smooth: true,
					}
				]
			};
		},
		chartPie(){
			this.optionPie = {
			        tooltip: {
			            show:false
			        },
			        color:["rgb(28,197,99)","rgb(86,115,254)"],
			        legend: {
						show:false
			        },
			        series: [
			            {
			                name:'订单发货量',
			                type:'pie',
			                radius: ['60%', '90%'],
							avoidLabelOverlap: false,
							startAngle:10,
							silent:true,
							roseType:'radius',
			                label: {
			                    show: true,
			                    position: 'center',
			                    formatter:'{c}',
			                    textStyle:{
			                       fontSize: 20,
			                    },
								color:'rgb(0,0,0)',
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
							itemStyle:{
								shadowColor: 'rgb(28,197,99)',
								shadowBlur: 20,
								borderRadius: ['20%', '50%']
							},
			                data:[
								{value: 335, name:'已发货'},
								{value: 28, name: '未发货' },
			                ]
			            }
			        ]
			    };

		}
	}
};
</script>
<style lang="scss">
@import '../../static/css/index.scss';
</style>
